<!--
 * @description  : 市管-无证户列表
 * @descriptionDetail: 市管-无证户列表
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon">
        <view @tap="handlerSure">
          确定
        </view>
      </view>
    </theme-navbar>
    <!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP-->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <view class="sticky-header">
      <u-search
        shape="round"
        :clearabled="true"
        :showAction="true"
        actionText="确定"
        :animation="true"
        v-model="keyword"
        @custom="handlerSearch"
      ></u-search>
    </view>
    <me-table
      :i="0"
      :top="70"
      :index="0"
      :load-data="loadData"
      ref="mescrollItem0"
    >
      <template #default="d">
        <view class="card">
          <u-row @tap="handlerSelectItem(d.data)">
            <u-col span="10">
              <client-item :client="d.data"></client-item>
            </u-col>
            <u-col span="2" style="text-align:right;">
              <u-icon
                name="checkbox-mark"
                color="#2979ff"
                size="38"
                style="margin-right: 10px;"
                v-if="selectedUids.includes(d.data.retailerUuid)"
              ></u-icon>
            </u-col>
          </u-row>
        </view>
      </template>
    </me-table>
  </view>
</template>

<script>
	import MeTable from '@/components/me-table.vue';
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import ClientItem from './components/client-item.vue';
	import queryService from "@/service/check/query.service";
	import checkService from "@/service/check/check.service";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			MeTable,
			ClientItem,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				keyword: "",
				isSingle: false, // 是否单选，默认多选
				selectedUids: [], // 选中项的ids
				selectedItems: [], // 选中项
				planList: [],
				newList: [],
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			};
		},
		onLoad(option) {
			this.isSingle = option.isSingle;
			this.planList = this.getRouteParam()
			// console.log(option)
		},
		methods: {
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("确定", () => {
					this.handlerSure();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.handlerSure();
				}
			},
			handlerSearch() {
				this.$refs['mescrollItem0'].refresh();
			},
			// 选中
			handlerSelectItem(item) {
				if (this.isSingle) {
					this.selectedUids = [item.retailerUuid, ];
					this.selectedItems = [item, ];
					return;
				}
				if (this.selectedUids.includes(item.retailerUuid)) {
					this.selectedItems = this.selectedItems.filter(it => it.retailerUuid != item.retailerUuid);
				} else {
					this.selectedItems.push(item);
				}
				this.selectedUids = [];
				this.selectedItems.forEach(it => this.selectedUids.push(it.retailerUuid));
			},
			// 在线案件查询数据
			loadData(page) {
				if (this.$deviceApi.geolocation) {
					return this.$deviceApi.geolocation().then(({
						longitude,
						latitude,
					}) => {
						return queryService.unlicenseListApp(page.num, page.size, {
							longitude: longitude,
							latitude: latitude,
							queryStr: this.keyword,
						});
					}).catch(() => {
						return queryService.unlicenseListApp(page.num, page.size, {
							queryStr: this.keyword,
						});
					});
				} else {
					return queryService.unlicenseListApp(page.num, page.size, {
						queryStr: this.keyword,
					});
				}
			},
			// 确定
			handlerSure() {
				let self = this
				if (this.isSingle && !this.$u.test.isEmpty(this.selectedItems)) {
					this.$modal.confirm("请选择任务", () => {
						this.$u.loading("加载中");
						checkService.addTempDayPlan(this.selectedItems[0].retailerUuid, this.selectedItems[0].licNo || "").then(dr => {
							if (dr.success) {
								this.$set(this.selectedItems, 'add', 'true')
								this.backPrev({
									paramKey: this.$rp.check.NO_LICENSE,
									param: this.selectedItems,
								});
								this.selectedUids = this.selectedItems = [];
							} else {
								this.$u.toast(dr.msg);
							}
						});
					}, () => {
						// console.log(112)
						this.$set(this.selectedItems, 'add', 'true')
						checkService.addImportPlan(this.selectedItems[0].retailerUuid, this.selectedItems[0].licNo || "").then(dr => {
							if (dr.success) {
								this.$set(this.selectedItems, 'add', 'true')
								this.backPrev({
									paramKey: this.$rp.check.NO_LICENSE,
									param: this.selectedItems,
								});
								this.selectedUids = this.selectedItems = [];
							} else {
								this.$u.toast(dr.msg);
							}
						});
					}, '临时走访', '重点检查')
				} else {
					if (this.selectedItems.length == 0) {
						this.$u.toast("请选择任务");
						return;
					}
					this.planList.forEach(item => {
						self.newList.push(item.retailerUuid)
					})
					let idList = self.selectedItems.filter(r => {
						return self.newList.includes(r.retailerUuid)
					})
					if (idList.length > 0) {
						this.$u.hideLoading();
						this.selectedItems.filter(item => {
							if (item.retailerUuid == idList[0].retailerUuid) {
								this.$u.toast(`【${item.companyName}】已存在`);
							}
						})
						return
					}
					this.backPrev({
						paramKey: this.$rp.check.NO_LICENSE,
						param: this.selectedItems,
					});
					this.selectedUids = this.selectedItems = [];
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/style/common/rightMenu.scss";

	.sticky-header {
		background-color: #fff;
		position: fixed;
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 44px;
		/* #endif */
		width: 100%;
		height: 40px;
		z-index: 999;
	}
</style>
